<template>
    <section>
        <goback :getName='goName'></goback>
        <div v-show="ifShowRule" class="detailRule" ref="detailRule" :style="{height: detailRuleHeight}">
            <img src="../../assets/mall/gzdt.png">
            <div class="ruleInfo">
                <div class="ruleTitle">规则说明</div>
                <div class="ruleContent">
                    <p class="ruleNum">一、参与规则</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;</span> 1、选择心仪商品立即购买。。</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;</span> 2、购买成功后次日起，可在【我的】页面中对该商品进行打卡。</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;</span> 3、同一商品在打卡进行时，不可重复参与该商品的【打卡送礼】活动。</p>
                    <p class="ruleNum">二、 打卡结果及奖励</p>
                    <p class="ruleNum">&nbsp;&nbsp;&nbsp; 1、打卡成功</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;</span>
                        购买商品后，在规定时间内完成该商品打卡次数要求，视为打卡成功。即可在3日内在【我的】中免费领取该商品。</p>
                    <p class="ruleNum">&nbsp;&nbsp;&nbsp; 2、打卡失败</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;</span>购买商品后，在规定时间内未完成该商品的打卡要求，视为打卡失败。</p>
                </div>
                <div class="closeBtn">
                    <img src="../../assets/mall/gzgb.png" @click="closeRule">
                </div>
            </div>
        </div>
        <div class="shadow" v-if="showShadow" @click="hiddenShadow"></div>
        <div class="registerSuccess" v-if="showShadow">
            <img src="../../assets/jmjs/gxwc.png">
            <div class="successInfo">
                你将获得<span>1{{dkData.productUnit}}</span>本产品！
                <div>（仅限三天）</div>
            </div>
            <div class="receiveNow" @click="receive">
                <img src="../../assets/jmjs/button ljlq.png">
            </div>
        </div>
        <div class="shadow" v-if="showShadow1" @click="hiddenShadow"></div>
        <div class="registerDefault" v-if="showShadow1">
            <div class="defaultTip">提 示</div>
            <div class="defaultWord">本产品还需打卡{{dkData.dkFrequency-dkData.dkCount}}天，剩余打卡天数已不足，故本次活动失败。</div>
            <div class="defaultBtn" @click="comeback">确定</div>
        </div>
        <div class="bgcDiv" :style="{height:bgcDivHeight}">
            <div class="ruleRow">
                <div class="rule-img" @click="rule">
                    <img src="../../assets/jmjs/hdgz.png">
                </div>
            </div>
            <div class="bannerContain">
                <img src="../../assets/jmjs/D.png">
                <div class="registerInfo">
                    <div class="registerTitle">&lt;打卡成功后即送<span> 1 </span>{{dkData.productUnit}}&gt;</div>
                    <div class="calendarDiv">
                        <Calendar class="calendar_" :choseDay="clickDay" :changeMonth="changeDate" :isToday="clickToday" :sundayStart="true"
                            :markDate="arr" :markDateMore="arr1">
                        </Calendar>
                        <div class="hideLine"></div>
                    </div>
                    <div class="progress" ref="progress">
                        <div :style="{width:progressWidth}" :class="{progress__:isZero}" class="progress_">
                            <div class="progressImg">
                                <img src="../../assets/jmjs/jdxr.png">
                            </div>
                        </div>
                        <div class="deadline">{{dkData.endTime|formatDate}}结束</div>
                        <div class="registerCount">{{dkData.dkCount}}<span>/{{dkData.dkFrequency}}次</span></div>
                        <div class="registerBtn">
                            <img src="../../assets//jmjs/djdk.png" v-if="!isRegister&&!isReturn" @click="register">
                            <img src="../../assets//jmjs/dkcg.png" v-if="isRegister&&!isReturn">
                            <img src="../../assets//jmjs/fh.png" v-if="isReturn" @click="comeback">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
    import Calendar from 'vue-calendar-component'
    import goback from '../../components/goback'
    import { userInfoGet, WXShare } from '../../libs/publicMethod'
    import { getHistoryDkTime, punchCard } from '../../libs/interface'
    export default {
        components: { Calendar, goback, getHistoryDkTime, userInfoGet, WXShare, punchCard },
        data () {
            return {
                userInfo: userInfoGet(),
                ifShowRule: false,
                detailRuleHeight: '',
                progressWidth: '',
                bgcDivHeight: '',
                arr: [],
                arr1: [],
                goName: '打卡日历',
                timestamp: 0,
                isZero: true,
                dkData: {},
                isRegister: false,
                showShadow: false,  //打卡完成时显示阴影
                showShadow1: false,  //打卡失败时显示阴影
                isReturn: false,
            }
        },
        methods: {
            test () {
                let vm = this
                vm.showShadow = true
            },
            clickDay (data) {
            },
            changeDate (data) {
            },
            clickToday (data) {
            },
            rule () {
                let vm = this
                vm.ifShowRule = true
                vm.detailRuleHeight = document.documentElement.clientHeight - 38 + 'px'
            },
            closeRule () {
                this.ifShowRule = false
            },
            register () {
                let vm = this
                let params = {
                    memberId: vm.userInfo.id,
                    buyDkProductId: vm.$route.params.id
                }
                punchCard(params, (data) => {
                    if (data.code === 1) {
                        vm.isRegister = true
                        vm.dkData.dkCount += 1
                        vm.progressWidth = vm.$refs.progress.clientWidth * vm.dkData.dkCount / vm.dkData.dkFrequency + 'px'
                        vm.arr.push(vm.formatDate1(new Date().getTime()))
                        if (vm.dkData.dkCount == vm.dkData.dkFrequency) {
                            vm.showShadow = true
                        }
                    }
                    else if (data.code === 222) {
                        vm.showShadow1 = true
                    } else {
                        vm.$toast(data.msg)
                    }
                })
            },
            hiddenShadow() {
                let vm = this
                if (!vm.showShadow) return
                vm.showShadow = false
            },
            receive () {
                let vm = this
                sessionStorage.setItem('jmjs', JSON.stringify({ id: vm.$route.params.id }))
                vm.$router.push('/jmjsPay/' + vm.dkData.skuId + '/1')
            },
            comeback () {
                sessionStorage.setItem('comeback', JSON.stringify({ isReturn: true }))
                history.back()
            },
            formatDate1 (input) {
                var d = new Date(input)
                var year = d.getFullYear()
                var month = d.getMonth() + 1
                var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
                var hour = d.getHours()
                var minutes = d.getMinutes()
                var seconds = d.getSeconds()
                return year + '/' + month + '/' + day
            },
            formatDate2 (input) {
                var d = new Date(input)
                var year = d.getFullYear()
                var month = d.getMonth() + 1
                var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
                var hour = d.getHours()
                var minutes = d.getMinutes()
                var seconds = d.getSeconds()
                return {'date': year + '/' + month + '/' + day, 'className': 'mark1'}
            },
        },
        created () {
            let vm = this
            if (sessionStorage.getItem('calendar')) {
                vm.goName = '打卡记录'
            }
        },
        mounted () {
            let vm = this
            vm.bgcDivHeight = document.body.clientHeight + 'px'
            if (sessionStorage.getItem('calendar')) {
                vm.isReturn = true
                vm.goName = '打卡记录'
            }
            // document.body.style.paddingBottom = 0
            let params = {
                memberId: vm.userInfo.id,
                buyDkProductId: vm.$route.params.id
            }
            getHistoryDkTime(params, (data) => {
                if (data.code === 1) {
                    vm.dkData = data.payload
                    vm.dkData.dateList.forEach((date)=>{
                        vm.arr.push(vm.formatDate1(date))
                    })
                    vm.dkData.canDkDateList.forEach((date)=>{
                        vm.arr1.push(vm.formatDate2(date))
                    })
                    let currentTime = vm.formatDate1(new Date().getTime())
                    if (vm.arr.indexOf(currentTime) === -1) {
                        vm.isRegister = false
                    } else {
                        vm.isRegister = true
                    }
                    vm.progressWidth = vm.$refs.progress.clientWidth * vm.dkData.dkCount / vm.dkData.dkFrequency
                    if (!vm.progressWidth == 0) {
                        vm.isZero = false
                    }
                    vm.progressWidth = vm.progressWidth + 'px'
                } else {
                    vm.$toast('系统异常')
                }
            })
        },
        filters: {
            formatDate(input) {
                var d = new Date(input)
                var year = d.getFullYear()
                var month = d.getMonth() + 1
                var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
                var hour = d.getHours()
                var minutes = d.getMinutes()
                var seconds = d.getSeconds()
                return year + '.' + month + '.' + day
            },
        },
    }
</script>
<style scoped>
    .detailRule{
    position: absolute;
    margin: auto;
    top: 2.4rem;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(0, 0, 0, .65)
}
.detailRule img{
    margin-top: 5%;
    width: 80%;
    height: 90%;
}
.ruleInfo{
    margin-top: 5%;
    width: 80%;
    height: 90%;
    position: absolute;
    top: -1%;
    right: 0;
    bottom: 0;
    left: 1%;
    margin: auto;
}
.ruleTitle{
    font-size: .95rem;
    color: #F2F2F4;
}
.ruleContent{
    margin: 12% auto 0;
    width: 80%;
    height: 71%;
    margin-bottom: 2%;
    overflow: auto;
    font-size: .8rem;
    line-height: 1.5rem;
    text-align: left;
}
.ruleNum{
    font-weight: bold;
}
.closeBtn{
    position: relative;
    z-index: 10;
    width: 100%;
    margin: auto;
    -moz-box-shadow: 0rem -2rem 2rem -.3rem rgb(255, 255, 255); 
    -webkit-box-shadow: 0rem -2rem 2rem -.3rem rgb(255, 255, 255); 
    box-shadow: 0rem -2rem 2rem -.8rem rgb(255, 255, 255); 
}
.closeBtn img{
    width: 80%;
    height: 100%;
}
.shadow{
    width: 100%;
    height: 100%;
    z-index: 7;
    position: fixed;
    top: 0;
    background-color: rgba(0,0,0,.5)
}
.registerSuccess{
    width: 100%;
    z-index: 8;
    position: fixed;
    top: 11%;
}
.registerSuccess img{
    width: 100%;
    display: block;
}
.registerDefault{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 14.5rem;
    width: 14rem;
    height: 8.5rem;
    border-radius: .7rem;
    background-color: #fff;
    z-index: 10;
    display: flex;
    flex-direction: column;
}
.defaultTip{
    margin: 1rem 0 .2rem;
    color: #DA1419;
    font-size: .9rem;
}
.defaultWord{
    margin: auto;
    width: 85%;
    font-size: .7rem;
    color: #333;
    letter-spacing: .05rem;
    transform: scale(.9,.9);
}
.defaultBtn{
    margin: auto;
    width: 10rem;
    height: 1.5rem;
    line-height: 1.5rem;
    border-radius: 1rem;
    font-size: .7rem;
    color: #fff;
    background-color: #DA1419;
    margin-bottom: 1rem;
}
.successInfo{
    position: absolute;
    width: 35%;
    height: 4rem;
    white-space: nowrap;
    /* border: 1px solid blue; */
    top: 45%;
    left: 1%;
    right: 0;
    margin: auto;
    color: #fff;
    font-size: .85rem;
    padding: 4%;
}
.successInfo span{
    color: #FFE81C;
}

.receiveNow{
    width: 50%;
    position: absolute;
    top: 64%;
    left: 0;
    right: 0;
    margin: auto;
}
.receiveNow img{
    width: 100%;
}
.bgcDiv{
    width: 100%;
    background: linear-gradient(0deg,#FF8F6D,#FF6C64);
    position: relative;
}
.ruleRow{
    width: 100%;
    height: 1.8rem;
    position: relative;
}
.rule-img{
    position: absolute;
    top: 0;
    right: 0;
    width: 5rem;
}
.rule-img img{
    width: 100%;
    height: 100%;
}
.bannerContain{
    width: 80%;
    /* height: 31rem; */
    height: 33.5rem;
    margin: 0 auto;
    position: relative;
}
.bannerContain img{
    display: block;
    width: 100%;
    height: 100%;
}
.registerInfo{
    position: absolute;
    top: 24%;
    display: flex;
    flex-direction: column;
}
.registerTitle{
    color: #523625;
    letter-spacing: .1rem;
    font-size: .8rem;
    font-weight: bold;
}
.registerTitle span{
    font-size: 1.1rem;
}
.calendarDiv{
    margin-top: -.2rem;
    margin-bottom: 1rem;
    position: relative;
}
.calendar_ >>> .wh_content_all{
    background-color: #FEDE67;
    width: 97%;
    margin: 0 auto;
}
.calendar_ >>> .wh_top_tag{
    text-shadow:1px 1px 1px #000;
    color:#FFF;
}
.calendar_ >>> .wh_isToday{
    background-color: inherit;
    background-image: url('../../assets/jmjs/bg.png');
    background-size: 60%;
    background-position: 50% 55%;
    background-repeat: no-repeat;
}
.calendar_ >>> .wh_content_item{
    transform: scale(.85,.85);
    font-weight: bold;
    margin: -.4rem 0;
}
.calendar_ >>> .wh_chose_day {
    /* background-color: #CAA94D; */
    background-color: inherit;
}
.calendar_ >>> .wh_content{
    border-bottom: .2rem solid #fff;
    width: 86%;
    margin: 0 auto .5rem;
    padding-bottom: .5rem
}
.calendar_ >>> .wh_jiantou1{
    border: none;
    transform: scale(1.75,1.75);
    background-image: url('../../assets/jmjs/z.png');
    background-size: contain;
}
.calendar_ >>> .wh_jiantou2{
    border: none;
    transform: scale(1.75,1.75);
    background-image: url('../../assets/jmjs/y.png');
    background-size: contain;
}
.calendar_ >>> .wh_content_li{
    color: #533725;
    font-weight: bold;
}
.calendar_ >>> .wh_isMark{
    background-color: #FEDE67;
    background-image: url('../../assets/jmjs/dui.png');
    background-position: 75% 80%;
    background-size: 40%;
    background-repeat: no-repeat;
}
.calendar_ >>> .mark1{
    background-color: #C0A855;
    border-radius: 0;
    width: 121%;
}
.hideLine{
    width: 90%;
    height: .5rem;
    background-color: #FEDE67;
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
    margin: auto;    
}
.progress{
    width: 84%;
    height: .4rem;
    border-radius: .4rem;
    border: 2px solid #523625;
    margin: 0 auto;
    position: relative;
}
.progress_{
    width: 0;
    height: 100%;
    background-color: #EA7D1E;
    border-radius: .4rem;
    border-right: 2px solid #523625;
    -moz-box-shadow: 0rem 0rem .4rem 0rem #FFF000 inset;
    -webkit-box-shadow: 0rem 0rem .4rem 0rem #FFF000 inset;
    box-shadow: 0rem .05rem .4rem 0rem #FFF000 inset;
    position: relative;
}
.progress__{
    border: none!important;
}
.progressImg{
    position: absolute;
    bottom: .6rem;
    right: 0;
    width: 3rem;
}
.progressImg img{
    width: 100%;
}
.deadline{
    font-size: .8rem;
    font-weight: bold;
    color: #EF3E08;
    position: absolute;
    right: -.6rem;
    /* bottom: .7rem; */
    bottom: -1.2rem;
    transform: scale(.85,.85);
}
.registerCount{
    font-size: .8rem;
    font-weight: bold;
    color: #EF3E08;
    position: absolute;
    /* right: -.2rem; */
    left: 0;
    bottom: -1.2rem;
}
.registerCount span{
    color: #523625;
    letter-spacing: .08rem;
}
.registerBtn{
    width: 65%;
    margin: auto;
    position: absolute;
    top: 1.7rem;
    left: 0;
    right: 0;    
}
.registerBtn img{
    width: 100%;
    display: block;
}
</style>